<template>
    <el-card shadow='never' style='max-height: 70vh; overflow: auto'>
        <el-form ref='form' :model='form' :rules='rules' label-width='110px' :disabled='disabled'>
            <el-form-item label='id:' prop='id' v-show='false'>
                <el-input v-model='form.id' disabled />
            </el-form-item>
            <el-row :gutter='10'>
                <el-col :span='12'>
                    <el-row :gutter='10'>
                        <el-col :span='24'>
                            <el-form-item label='医院名称:' prop='name'>
                                <el-input v-model='form.name' placeholder='请输入医院名称' clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span='24'>
                            <el-form-item label='统一社会信用代码:' prop='uscc'>
                                <el-input v-model='form.uscc' placeholder='请输入统一社会信用代码' clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span='24'>
                            <el-form-item label='官方网址:' prop='website'>
                                <el-input v-model='form.website' placeholder='请输入官方网址' clearable />
                            </el-form-item>
                        </el-col>

                        <el-col :span='24'>
                            <el-form-item label='服务电话：' prop='service_tel'>
                                <el-input v-model='form.service_tel' placeholder='请输入服务电话'></el-input>
                            </el-form-item>
                        </el-col>


                        <el-col :span='24'>
                            <el-form-item label='法人姓名:' prop='person_name'>
                                <el-input v-model='form.person_name' placeholder='请输入法人姓名' clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span='24'>
                            <el-form-item label='法人身份证:' prop='person_idcard'>
                                <el-input v-model='form.person_idcard' placeholder='请输入法人身份证' clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='logo:' prop='logo'>
                        <ImageUpload v-model='form.logo' />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span='12'>
                    <el-form-item label='医院类别:' prop='categorys'>
                        <div class='flex'>
                            <SelectCategory url='/admin/ch.system_category/tree' style='flex: 1'
                                            :queryParams='{
                                            type: 1
                                        }'
                                            :check-strictly='true'
                                            :value='[cache.category1, cache.category2, cache.category3]'
                                            @change='onChangeCategory'></SelectCategory>
                            <el-button type='success' plain size='small' style='margin-left: 10px;'
                                       @click='handleAddCategory'>添加
                            </el-button>
                        </div>
                        <el-tag :key='idx' closable @close='onCloseCategory(idx)'
                                v-for='(el, idx) in form.categorys'
                                :disable-transitions='false'>
                            {{ [el.category1_text, el.category2_text, el.category3_text].filter(e => !!e).join('/') }}
                        </el-tag>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='医院级别:' prop='levels'>
                        <div class='flex'>
                            <SelectCategory url='/admin/ch.system_category/tree' style='flex: 1'
                                            :queryParams='{
                                            type: 6
                                        }'
                                            :check-strictly='true'
                                            :value='[cacheLevel.category1, cacheLevel.category2, cacheLevel.category3]'
                                            @change='onChangeCategoryLevel'></SelectCategory>
                            <el-button type='success' plain size='small' style='margin-left: 10px;'
                                       @click='handleAddCategoryLevel'>添加
                            </el-button>
                        </div>
                        <el-tag :key='idx' closable @close='onCloseCategoryLevel(idx)'
                                v-for='(el, idx) in form.levels'
                                :disable-transitions='false'>
                            {{ [el.category1_text, el.category2_text, el.category3_text].filter(e => !!e).join('/') }}
                        </el-tag>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span='24'>
                    <el-form-item label='医院证件:' prop='certificates'>
                        <ImageUpload v-model='form.certificates' :limit='4' />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='24'>
                    <el-form-item label='所在地址：' prop='address'>
                        <div class='flex'>
                            <el-input v-model='form.address' placeholder='请输入所在地址'></el-input>
                            <el-button style='margin-left: 10px;' type='success'
                                       @click='$refs.location.handleMap(form)'>选择地址
                            </el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='12'>
                    <el-form-item label='医院优势：' prop='advantage'>
                        <el-input type='textarea' v-model='form.advantage' :rows='4'
                                  placeholder='请输入医院优势'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='医院简介:' prop='description'>
                        <el-input type='textarea' :rows='4' v-model='form.description' />
                    </el-form-item>
                </el-col>
                <el-col :span='24'>
                    <el-form-item label='详细介绍:' prop='about'>
                        <Editor v-model='form.about' />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label='医院类型:'>
                <el-select v-model='form.type' placeholder='医院类型'>
                    <el-option
                        v-for='item in typeList'
                        :key='item.value'
                        :label='item.label'
                        :value='item.value'>
                    </el-option>
                </el-select>
            </el-form-item>


            <el-row>
                <el-col :span='12'>
                    <el-form-item label='状态:' prop='status'>
                        <el-select v-model='form.status' placeholder='请选择状态' clearable>
                            <el-option v-for='(item, index) in status' :key='index' :label='item.label'
                                       :value='item.value' />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='排序:' prop='sortweight'>
                        <el-input-number v-model='form.sortweight' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type='primary' @click='submitForm'>保存</el-button>

                <el-button type='warning' @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
        <j-select-location ref='location' @ok='onLocationOk'></j-select-location>
    </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'

export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            typeList: [
                { label: '未分类', value: 0 },
                { label: '社区医院', value: 1 },
                { label: '大医院', value: 2 },
            ],
            status: [
                { label: '正常', value: 1 },
                { label: '禁用', value: 0 },
            ],
            cache: {},
            cacheLevel: {},
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                } else {
                    this.form = {}
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
            this.form = {}
        },
        onChangeCategory(e, pathLabels) {
            if (e.length >= 3) this.$set(this.cache, 'category3', e[2])
            if (e.length >= 3) this.$set(this.cache, 'category3_text', pathLabels[2])
            if (e.length >= 2) this.$set(this.cache, 'category2', e[1])
            if (e.length >= 2) this.$set(this.cache, 'category2_text', pathLabels[1])
            if (e.length >= 1) this.$set(this.cache, 'category1', e[0])
            if (e.length >= 1) this.$set(this.cache, 'category1_text', pathLabels[0])
        },
        handleAddCategory() {
            if (Object.keys(this.cache).length <= 0) return this.$message.error('请选择分类')
            if (this.form.categorys) {
                let idx = this.form.categorys.findIndex(el => {
                    return el.category1 === this.cache.category1
                        && el.category2 === this.cache.category2
                        && el.category3 === this.cache.category3
                })
                if (idx >= 0) {
                    return this.$message.error('请勿重复添加')
                }
                this.form.categorys.push(JSON.parse(JSON.stringify(this.cache)))
            } else {
                this.$set(this.form, 'categorys', [
                    JSON.parse(JSON.stringify(this.cache)),
                ])
            }
            this.$set(this, 'cache', {})
        },
        onCloseCategory(idx) {
            this.form.categorys.splice(idx, 1)
        },
        onChangeCategoryLevel(e, pathLabels) {
            if (e.length >= 3) this.$set(this.cacheLevel, 'category3', e[2])
            if (e.length >= 3) this.$set(this.cacheLevel, 'category3_text', pathLabels[2])
            if (e.length >= 2) this.$set(this.cacheLevel, 'category2', e[1])
            if (e.length >= 2) this.$set(this.cacheLevel, 'category2_text', pathLabels[1])
            if (e.length >= 1) this.$set(this.cacheLevel, 'category1', e[0])
            if (e.length >= 1) this.$set(this.cacheLevel, 'category1_text', pathLabels[0])
        },
        handleAddCategoryLevel() {
            if (Object.keys(this.cacheLevel).length <= 0) return this.$message.error('请选择分类')
            if (this.form.levels) {
                let idx = this.form.levels.findIndex(el => {
                    return el.category1 === this.cache.category1
                        && el.category2 === this.cache.category2
                        && el.category3 === this.cache.category3
                })
                if (idx >= 0) {
                    return this.$message.error('请勿重复添加')
                }
                this.form.levels.push(JSON.parse(JSON.stringify(this.cacheLevel)))
            } else {
                this.$set(this.form, 'levels', [
                    JSON.parse(JSON.stringify(this.cacheLevel)),
                ])
            }
            this.$set(this, 'cache', {})
        },
        onCloseCategoryLevel(idx) {
            this.form.levels.splice(idx, 1)
        },
        onLocationOk(obj) {
            this.form = {
                ...this.form,
                ...obj,
            }
        },
    },
}
</script>
